<template>
	<scroll-view class="home">
		<view class="header">
			<view class="header-left">
				<text class="header-left__name">Hello，{{userName}}</text>
				<text class="header-left__msg">你好。</text>
			</view>
			<view class="header-right">
				<view class="header-right__weather">
					<image src="../../static/img/snow.png" />
					<text>{{weatherInfo.liveData.temperature||''}} c°</text>
				</view>
				<text class="header-right__tip">
					湿度：{{weatherInfo.liveData.humidity||''}} % 风向:{{weatherInfo.liveData.winddirection||''}} 风力：{{weatherInfo.liveData.windpower||''}}
				</text>
			</view>
		</view>
		<view class="banner">
			<swiper autoplay loop  @change="onBannerChange" class="banner-swiper">
				<swiper-item   class="banner-swiper__item" v-for="(imgItem, index) in ImageList" :key="index">
					<image mode="aspectFill" class="banner-swiper__img" :src="imgItem.imgSrc" @click="GoPage(index)"/>
				</swiper-item>
				<!-- <swiper-item class="banner-swiper__item">
					<image mode="aspectFill" class="banner-swiper__img"  />
				</swiper-item>
				<swiper-item class="banner-swiper__item">
					<image mode="aspectFill" class="banner-swiper__img" />
				</swiper-item> -->
			</swiper>
			<view class="banner-footer">
				<text class="banner-footer__msg">安心服务－用心只为安心</text>
				<view class="banner-pagination" >
					<view :class="['banner-pagination__item', bannerIndex === index && 'banner-pagination__item--active']" v-for="(imgItem, index) in ImageList" :key="index"	></view>
					<!-- <view :class="['banner-pagination__item', bannerIndex === 0 && 'banner-pagination__item--active']"></view>
					<view :class="['banner-pagination__item', bannerIndex === 1 && 'banner-pagination__item--active']"></view> -->
				</view>
			</view>
		</view>
		<view class="broadcast">
			<image class="broadcast-ball" src="../../static/img/ball.png" />
			<swiper vertical autoplay loop class="broadcast-swiper">
				<swiper-item class="broadcast-swiper__item">
					<text>广播广播广播广播广播广播广播广播广播广播广播广播广播广播广播广播</text>
				</swiper-item>
				<swiper-item class="broadcast-swiper__item">
					<text>广播广播广播广播广播广播广播广播广播广播广播广播广播广播广播广播</text>
				</swiper-item>
				<swiper-item class="broadcast-swiper__item">
					<text>广播广播广播广播广播广播广播广播广播广播广播广播广播广播广播广播</text>
				</swiper-item>
			</swiper>
		</view>
		<view class="menu">
			<view class="menu-head">
				<text class="menu-head__en">THE WORKBENCH</text>
				<text class="menu-head__zh">工作台</text>
			</view>
			<view class="menu-list">
				<view class="menu-item" @click="menuItemClick" data-menuname='workorder'>
					<image mode="aspectFit" src="../../static/img/icon-gongdan.png" />
					<text>服务工单</text>
					<view class="menu-item__badge">
						<text>9</text>
					</view>
				</view>
				<view class="menu-item" @click="menuItemClick" data-menuname='productsearch'>
					<image mode="aspectFit" src="../../static/img/icon-chaxun.png" />
					<text>产品查询</text>
				</view>
				<view class="menu-item" @click="menuItemClick" data-menuname='partsearch'>
					<image mode="aspectFit" src="../../static/img/icon-peijian.png" />
					<text>配件查询</text>
				</view>
				<view class="menu-item" @click="menuItemClick" data-menuname='msgcenter' v-if="prodEnv==false">
					<image mode="aspectFit" src="../../static/img/icon-message.png"/>
					<text>消息中心</text>
					<view class="menu-item__badge">
						<text>10</text>
					</view>
				</view>
				<view class="menu-item" v-if="prodEnv==false">
					<image mode="aspectFit" src="../../static/img/icon-paicheng.png" />
					<text>工单排程</text>
				</view>
				<view class="menu-item" v-if="prodEnv==false">
					<image mode="aspectFit" src="../../static/img/icon-huanban.png" />
					<text>物联网换板</text>
				</view>
			</view>
		</view>

	</scroll-view>
</template>

<script>
	import amap from '@/common/amap-wx.js'
	export default {
		data() {
			return {
				weatherInfo: {},
				amapPlugin: null,
				bannerIndex: 0,
				apiKey: '6799b5f6f88d3d9fb52ac244855a8759',
				ImageList: [],
			}
		},
		computed: {
			prodEnv() {
				return this.$ENV.prodEnv
			},
			userName() {
				return this.UserInfo.mobile || ''
			}
		},
		onShow(e) {
			//debugger;
			console.log(this.UserInfo)
		},
		onLoad(e) {
			//debugger;
			this.amapPlugin = new amap.AMapWX({
				key: this.apiKey,
			})
			this.getWeather()
			this.GetSlidePic();
		},
		methods: {
			//获取天气数据
			getWeather() {
				this.amapPlugin.getWeather({
					success: (data) => {
						//成功回调
						//debugger;
						this.weatherInfo = data;
						console.log(data)
					},
					fail: function(info) {
						//失败回调
						console.log(info)
					}
				})
			},
			async GetSlidePic() {
				let result = await this.commService.HPSlideImgsAsync(this.UserInfo.mobile,
					"1990-01-01 00:00:00", this.UserInfo.RetId);
				if (result && result.RetBool) {
					if (result.RetObject) {
						let ImageCount = JSON.parse(result.RetObject);
						//console.log(ImageCount);
						for (let index in ImageCount) {
							let Item = ImageCount[index];
							let imgSrc = Item.ImgBaseStr;
							if (Item.ImgType.toLowerCase() == ".jpg" || Item.ImgType.toLowerCase() == ".jpeg") {
								imgSrc = "data:image/jpeg;base64," + imgSrc;
							} else if (Item.ImgType.toLowerCase() == ".png") {
								imgSrc = "data:image/png;base64," + imgSrc;
							}
							let imageItem = {
								imgSrc: imgSrc,
								HttpUrl:Item.HttpUrl,
							}
							this.ImageList.push(imageItem);
						}
					}else{
						uni.showToast({
							title: "读取不到轮播图! " + msg,
							icon: "none",
							duration: 3000
						});
					}
				}else{
					let msg = result.RetMsg ? result.RetMsg : "";
					uni.showToast({
						title: "读取轮播图失败! " + msg,
						icon: "none",
						duration: 3000
					});
				}
			},
			onBannerChange(ev) {
				this.bannerIndex = ev.detail.current;
			},

			menuItemClick(e) {
				let menuname = e.currentTarget.dataset.menuname
				if (menuname === "workorder") {
					uni.switchTab({
						url: "../workorder/index"
					});
				} else if (menuname === "productsearch") {
					uni.navigateTo({
						url: "../productlist/index"
					})
				} else if (menuname === "partsearch") {
					uni.navigateTo({
						url: "../fittinglist/index"
					})
				} else if (menuname == "msgcenter") {
					uni.navigateTo({
						url: "../messagecenter/index"
					})
				}

			},
			GoPage(index){
				let item = this.ImageList[index];
				if(item.HttpUrl){
					uni.navigateTo({
						url:"../webpage/index?Url="+item.HttpUrl,
					});
				}
			},
		}
	}
</script>

<style lang="scss">
	@import './index.scss';
</style>
